<template>
  <view class="page_root" datu-page-name="auth" datu-page-identification="b_j9st1n6175">
    <!-- UNI_APP_EXEGESIS_START NAVIGATION_TEMPLATE UNI_APP_EXEGESIS_END -->

    <view class="body">
      <view class="tabs">
        <view class="tabs-item" v-for="(item, index) in list" :key="index" :class="{ active: current === index }"
          @click="tabChange(index)">{{ item.name }} <view v-if="item.count > 0" class="tabs-item-icon">
            <span class="tip-num">{{ item.count }}</span>
          </view>
          <view class="indicator" v-if="current === index"></view>
        </view>
      </view>
      <scroll-view scroll-x class="horizontal-scroll">
        <u-tag v-for="(tag, index) in tagsData" :key="index" :text="tag.title"
          :class="{ 'selected-tag': selectedTag === tag.title }" @click="handleTagClick(tag.title)" />
      </scroll-view>


      <view class="determine-view" v-if="activeKey === '我发起的' || activeKey === '已办事项'">
        <u-tabs v-model:activeKey="innerActiveKey" type="card">
          <u-tab-pane key="1" tab="全部" />
          <u-tab-pane key="2" tab="已通过" />
          <u-tab-pane key="3" tab="已驳回" />
          <u-tab-pane v-if="activeKey === '我发起的'" key="4" tab="已撤销" />
        </u-tabs>
      </view>
    </view>
  </view>
</template>
<script setup>

import {
  ref, reactive, toRaw, markRaw,
  watch, computed,
  onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, getCurrentInstance
} from "vue";
import { useRoute } from 'vue-router';
const route = useRoute();
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
import { cloneDeep, localGet, traversalTreeStructure, set, checkCaseCondition, throttle, merge, debounce, getGridStyle, getCellRenderAble, formulaStrategy } from '@/utils/index';
import { isEqual, isNullOrEmpty, isEmptyArr, isArray, isEmpty, isNullOrUnDef, isContained } from '@/utils/is';
import { CovertOptions, getChartsDataSourceConvert } from '@/utils/chart';
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
import { FormFormat } from '@/utils/formFormat'
import { customAddWaterMarkFunc, generateWaterMarkText } from '@/utils/addWaterMark';
import dayjs from 'dayjs';
/*** UNI_APP_EXEGESIS ***
import { handleRedirect, permission, parseJson } from '@/utils/common';
import { onPullDownRefresh, onLoad, onReady, onShow, onHide, onPageScroll, onUnload } from '@dcloudio/uni-app';
import { BroadcastMessage } from '@/utils/BroadcastMessage';
import { sendToken } from "@/hooks/useIframeToken";
*** UNI_APP_EXEGESIS ***/


// ---------------------------- 属性定义 ----------------------------
const sourceId = "page50001883"

// 是否显示菜单按钮
const isMenuIconShow = false;
// NAVIGATION_MENU
const handleShowNavigation = () => { };

let isProcessState = ref(false);


const setTimeOutList = [];





// ============================ 属性定义 ============================

// ---------------------------- 元素数据引用 ----------------------------
// 动态key的map
const fieldTypeMap = {};
// 动态key的map
const refMap = {};

const showState = reactive({

})
// ============================ 元素数据引用 ============================

// ---------------------------- 数据 ----------------------------


// ============================ 数据 ============================

// ---------------------------- 方法 ----------------------------
// ---------------------------- 页面数据 ----------------------------


// ============================ 页面数据 ============================

// ---------------------------- 响应 ----------------------------

// ============================ 响应 ============================

// ---------------------------- 函数 ----------------------------

// 自定义函数 返回上一页
const customFunction_goBack_k4z93223fy = (...params) => {
  uni.navigateBack()
}

// ============================ 函数 ============================

// ---------------------------- 页面参数 ----------------------------

const pageParameter_state = reactive({
  'processInstanceId': undefined,
})

// ============================ 页面参数 ============================

// ---------------------------- 组件事件处理方法 ----------------------------


// ============================ 组件事件处理方法 ============================

// ============================ 方法 ============================

// ---------------------------- 生命周期 ----------------------------
/*** UNI_APP_EXEGESIS ***
    // 获取上一层传递的数据
    const workflowChannel = new BroadcastMessage('WORKFLOW');
    workflowChannel.publish({ status: 'Ready' });
    workflowChannel.subscribe((data) => {
      if (data) {
        isProcessState.value = (window.self !== window.parent && data.type === 'hideHeader');
      }
    });
    *** UNI_APP_EXEGESIS ***/


const pageScrollTop = ref(0)

// *** PREVIEW_EXEGESIS ***
onMounted(() => {
  setPageParams(route.query)
  // 设置表单的rule
  try {

  } catch {
    // do nothing
  }
});
// *** PREVIEW_EXEGESIS *** //

/*** UNI_APP_EXEGESIS ***
const routeOption = ref({})
onLoad((option) => {
  routeOption.value = option;
});
onReady(() => {
  setPageParams(routeOption.value)
  // 设置表单的rule
  try{

  }catch{
      // do nothing
  }
});
// 图表刷新标记
const uChartsReshowFlag = ref(false);
onHide(() => { // 页面隐藏后标记置为false(如果不置为false无法触发图表更新)
    uChartsReshowFlag.value = false
})
onShow(() => {
    uChartsReshowFlag.value = true; // 页面激活后,标记置为true

    setPageParams(routeOption.value)
})
onPageScroll(e => {
    pageScrollTop.value = e.scrollTop
});
*** UNI_APP_EXEGESIS ***/

const setPageParams = (routerParam) => {
  const pageParams = [{ "dataType": "STRING", "dependencies": [], "name": "processInstanceId" }];
  const strategyMap = {
    STRING: (param, paramValue) => {
      pageParameter_state[param.name] = paramValue;
    },
    BOOLEAN: (param, paramValue) => {
      if ('true' === (paramValue || '').toLowerCase()) {
        pageParameter_state[param.name] = true
      } else if ('false' === (paramValue || '').toLowerCase()) {
        pageParameter_state[param.name] = false
      } else {
        // TODO: 是否要支持toast
        console.error('参数传入错误！类型不匹配！');
      }
    },
    NUMBER: (param, paramValue) => {
      if (!isNaN(paramValue)) {
        pageParameter_state[param.name] = Number(paramValue);
      } else {
        // TODO: 是否要支持toast
        console.error('参数传入错误！类型不匹配！');
      }
    },
    ARRAY: (param, paramValue) => {
      if (isNullOrUnDef(paramValue) || !paramValue || paramValue === 'undefined') { // default value
        pageParameter_state[param.name] = [];
      } else if (paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
        try {
          pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue));
        } catch (error) {
          console.error('参数解析失败 ', error);
        }
      } else {
        console.error('参数传入错误！类型不匹配！');
      }
    },
  };
  pageParams.forEach((param) => {
    strategyMap[param.dataType](param, routerParam[param.name])
  });


}

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ? clearInterval(timer) : clearTimeout(timer);
  });
});


/*** UNI_APP_EXEGESIS ***
onPullDownRefresh(() => {
  // 下拉刷新
  setTimeout(() => {
      uni.stopPullDownRefresh()
  }, 1000)
})
*** UNI_APP_EXEGESIS ***/

// ============================ 生命周期 ============================

// ---------------------------- 数据关联处理 ----------------------------
// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================
//
// ============================ 数据关联处理 ============================

// ---------------------- 不同组件自定义的处理逻辑 ---------------------

// ====================== 不同组件自定义的处理逻辑 ======================


// ================================定制化逻辑========================================
const items = ref([
  { id: 1, content: 'Item 1', selected: false },
  { id: 2, content: 'Item 2', selected: false },
  { id: 3, content: 'Item 3', selected: false }
])

const selectedItems = ref([])

const submitSelection = () => {
  console.log('Selected Items:', items.value)
  let selectedId = items.value.filter(item => item.selected === true).map(item => item.id)
  console.log(selectedId)
  // 发送 selectedItems.value 到后端
  // 例如，使用 fetch 或 axios 进行请求
}


// 审批管理数据

const list = reactive([{
  name: '待办事项',
  count: 5
}, {
  name: '已办事项',
  count: 5
}, {
  name: '我发起的',
  count: 5
},
{
  name: '抄送我的',
  count: 5
}
])
const current = ref(0)
function tabChange(index) {
  current.value = index;
}
const tagsData = reactive([
  {
    title: '全部事项',
    num: 10
  },
  {
    title: '催办事项',
    num: 10
  },
  {
    title: '工时日报审批',
    num: 10
  },
  {
    title: '交付项目（通用模板-任务-完成审批）',
    num: 10
  }
])
const selectedTag = ref(tagsData[0].title); // 默认选中第一个标签

const handleTagClick = (title) => {
  selectedTag.value = title;
  sendSelectedTag(title);
};

const sendSelectedTag = async (title) => {
 console.log(title);
};
</script>
<style lang="less" scoped>
.page_root {
  min-height: 100%;
  box-sizing: border-box;
}

.item-container {
  position: relative;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}

.item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-container {
  position: relative;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}

.item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.body {
  background-color: #fff;
  height: 100%;
  padding: 24px;
}

:deep(.ant3-tag-checkable) {
  background-color: #f0f2f5;
}

:deep(.ant3-tag-checkable-checked) {
  background-color: #d9e4fd;
  color: #262626;
  border-color: #3875ff;
}

.determine-div {
  margin-top: 20px;
}

:deep(.u-scroll-box) {
  display: flex;
}

.tabs {
  width: 100%;
  display: flex;
  background: #FFFFFF;
  height: 50px;
  overflow-x: auto;
  /* 添加水平滚动 */
  white-space: nowrap;
  /* 防止换行 */
}

.tabs-item {
  position: relative;
  width: 25%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #595959;
  font-weight: 400;
  height: 20px;
  line-height: 30px;
  font-weight: 600;
  text-align: center;
  margin-right: 10px;
}

.tabs-item.icon {}

.indicator {
  top: 25px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  /* Adjust the width of the indicator according to your design */
  height: 1px;
  /* Adjust the height of the indicator according to your design */
  background-color: #0078FF;
  display: none;
  /* Initially hide the indicator */
  border: 1px solid #0078FF;
}

.active .indicator {
  display: block;
  /* Display the indicator when tabs-item has active class */
}

.active {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #0078FF;
  font-weight: 600;
}

.tabs-item-icon {
  position: absolute;
  height: 15px;
  min-width: 15px;
  right: -8px;
  top: 2px;
  border-radius: 50%;
  /* 将div变为圆形 */
  background-color: red;
  /* 红色背景 */
  color: white;
  /* 白色文字 */
  line-height: 15px;
  text-align: center;
  padding: 0 1px;
}

.tip-num {
  display: block;
  font-size: 10px;
}


.horizontal-scroll {
  white-space: nowrap;
  display: flex;
}

.scroll-tag {
  display: inline-block;
  margin-right: 10px;
  /* 根据需要调整间距 */
}

.u-tag {
  display: inline-block;
  margin-right: 10px;
  /* 根据需要调整间距 */
  background-color: #f0f2f5;
  color: inherit;
  border: 1px solid transparent;
  cursor: pointer;
}

.u-tag.selected-tag {
  background-color: #d9e4fd;
  color: #262626;
  border-color: #3875ff;
}
</style>
